<template>
  <div class="app-container">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form ref="form" label-width="80px" :inline="!false" size="normal">
            <el-form-item label="组件名">
              <el-input
                v-model="params.compName"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="placeholder">
              <el-input
                v-model="params.placeholder"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="默认值">
              <el-input
                v-model="params.defaultVal"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="字段名">
              <el-input
                v-model="params.params"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="国际化">
              <el-input
                v-model="params.label"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAdd"
                >添加自定义过滤</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form ref="form" label-width="80px" :inline="!false" size="normal">
            <el-form-item label="字段名">
              <el-input
                v-model="params2.props"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="对齐方式">
              <el-input
                v-model="params2.align"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="国际化">
              <el-input
                v-model="params2.label"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleAdd2"
                >添加自定义过滤</el-button
              >
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-card>
    <mavon-editor :ishljs="true" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: ``,
      tableOptions: {
        // 表格接口
        apiFn: this.$getWZlIST,
        // 过滤配置
        queryList: [],
        // 表格配置
        cols: [
          // {
          //   props: "articleTitle", //字段
          //   edit: true, //是否开启编辑
          //   html: true, //是否开启编辑
          //   align: "center", //对齐方式
          //   width: 200, //宽度
          //   label: () => {
          //     //国际化
          //     return this.$t("m.name");
          //   },
          // },
        ],
        // 操作配置
        handle: [
          // {
          //   btntxt: "编辑",
          //   txt: "编辑",
          //   handleName: "handleEdit",
          // },
        ],
      },
      params: {
        compName: "nameInput",
        params: "title",
        placeholder: "请输入姓名",
        ref: "nameInput",
        defaultVal: "1",
        label: "name",
      },
      params2: {
        props: "",
        edit: true,
        html: true,
        align: "",
        width: 200,
        label: "name",
      },
    };
  },
  methods: {
    handleAdd() {
      this.tableOptions.queryList.push({
        compName: this.params.compName,
        params: this.params.params,
        placeholder: this.params.placeholder,
        ref: this.params.compName,
        defaultVal: this.params.defaultVal,
        label: `()=>{
           return this.$t("m.${this.params.label}");
        }`,
      });
      this.value = JSON.stringify(this.tableOptions)
      console.log(this.value.replace(/[\r\n]/g,""))

    },
    handleAdd2() {
      this.tableOptions.cols.push({
        props: this.params2.props,
        align: this.params2.align,
        edit: true,
        html: true,
        label: `()=>{return this.$t("m.${this.params.label}");`,
      });
      this.value = JSON.stringify(this.tableOptions)
    },
  },
};
</script>

<style scoped>
.line {
  text-align: center;
}
</style>

